$(function () {
    // 1.刚进入页面渲染 并 设置搜索框的值
    render()
    $('[name="key"]').val(getSearch().key)

    // 2.搜索按钮
    $('.btn-search').on('click', function () {
        var text = $('[name="key"]').val().trim()
        if (!text) {
            mui.toast('请输入搜索关键字')
            return
        }
        location.href = 'searchList.html?key=' + text
    })

    // 3.排序
    $('.main .sort li[data-type]').on('click', function () {
        var data = {
            proName: getSearch().key,
            page: 1,
            pageSize: 100
        }
        // 判断有没有active类
        if ($(this).hasClass('active')) {
            // 有active类
            $(this).find('span').toggleClass('fa-angle-down').toggleClass('fa-angle-up')
            data[$(this).data('type')] = $(this).find('span').hasClass('fa-angle-down') ? 2 : 1
        } else {
            // 没有active类  按此类降序排列
            data[$(this).data('type')] = 2
            $(this).siblings().find('span').removeClass('fa-angle-up').addClass('fa-angle-down')
            $(this).addClass('active').siblings().removeClass('active')
        }
        render(data)
    })



    // 封装
    function render(data) {
        data = data || {
            proName: getSearch().key,
            page: 1,
            pageSize: 100
        }
        $.ajax({
            url: '/product/queryProduct',
            type: 'get',
            data: data,
            beforeSend: function () {
                $('.product').html($('<div class="animate"></div>'))
            },
            success: function (info) {
                setTimeout(function () {
                    $('.product').html(template('tmp', info))
                },1000)
            }
        })
    }

})